<template>
	<view class="tixian">
		<view class="info">
			<view class="username">
				<view class="label">真是姓名*</view>
				<input class="nameValue" v-model="formData.userName" placeholder="请输入真实姓名" type="text">
			</view>
			<view class="tip">
				注:根据微信/支付宝转账规定，请输入提现账户对应的真实姓名，谢谢配合
			</view>
		</view>
		<view class="request">
			<view class="title">
				请输入提现数量
				<view class="value">
					您有0豆，可提现{{userInfo.able_rebate||0.00}}元
				</view>
				<view class="req-btn">全部提现</view>
			</view>
			<input class="reqValue" v-model="formData.amount" type="text" placeholder="0" placeholder-style="color:#333"
				 />
			<view class="way">
				<view class="way-name">
					<image class="wechat-icon"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240205/20240205212057917748.png"></image>
					提现至微信
				</view>
				<image src="https://video.file.zhuochengyun.com/bwc/uploads/20240205/20240205200846252765.png"
					class="checkicon"></image>
			</view>
			<view class="content">
				1豆可提现1元，单次最高提现200元;提现至微信:
				<text>红包将通过微信服务通知发给您;红包发送后请于24小时内领取，过期无法领取哦~(如有问题请联系客服)</text>
				·提现至支付宝:现金可直接到支付宝余额
			</view>
			<view class="submit" @click="submit">立即申请</view>
		</view>
		<view class="record">
			<view class="head">收益明细</view>
		</view>
		<view class="join-group"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					amount: null,
					userName: ''
				},
				userInfo: uni.getStorageSync('userInfo')

			}
		},
		methods: {
			submit() {
				uni.showToast({
					title: '暂未开通'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tixian {
		width: 100%;
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;

		.info {
			width: 710rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.username {
				border-bottom: 1rpx solid #f4f4f4;
				font-size: 24rpx;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;

				.label {
					color: #ff6700;
					font-size: 32rpx;
				}

				.nameValue {
					flex: 1;
					text-align: right;
				}
			}

			.tip {
				font-size: 24rpx;
				color: #999;
				line-height: 40rpx;
				padding-top: 20rpx;
			}
		}

		.request {
			width: 710rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333;
				line-height: 32rpx;

				.value {
					font-size: 24rpx;
					line-height: 40rpx;
					color: #999;
				}

				.req-btn {
					font-size: 24rpx;
					font-weight: bold;
					color: #ff6700;
					border-radius: 40rpx;
					border: 1rpx solid #ff6700;
					padding: 5rpx 20rpx;
				}
			}

			.reqValue {
				width: 100%;
				height: 120rpx;
				background-color: #f5f5f5;
				border-radius: 20rpx;
				padding-left: 50rpx;
				box-sizing: border-box;
				font-weight: bold;
				font-size: 48rpx;
				margin-top: 20rpx;
			}

			.way {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;

				.way-name {
					display: flex;
					align-items: center;
					font-size: 24rpx;

					.wechat-icon {
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}

				}

				.checkicon {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.content {
				font-size: 24rpx;
				color: #999;
				border: 1rpx solid #f4f4f4;
				padding: 20rpx 20rpx;
				border-radius: 20rpx;
				margin-top: 20rpx;
				line-height: 40rpx;
				text-align: justify;

				text {
					color: #ff6700;
				}
			}

			.submit {
				width: 600rpx;
				height: 80rpx;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: #ff6700;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 2rpx;
				margin: 50rpx auto 20rpx;
			}
		}

		.record {
			width: 710rpx;
			margin: 20rpx auto;
			border-radius: 20rpx;
			padding: 30rpx 30rpx;
			background-color: #fff;

			.head {
				font-size: 32rpx;

			}
		}
	}
</style>